<template>
  <div>
      <el-card class="!border-none" v-loading="pager.loading" shadow="never">
          <el-button type="primary" @click="handleAdd">
              <template #icon>
                  <icon name="el-icon-Plus" />
              </template>
              新增
          </el-button>
          <!-- <el-button
              v-perms="['hotel_basic/delete']"
              :disabled="!selectData.length"
              @click="handleDelete(selectData)"
          >
              删除
          </el-button> -->
          <div class="mt-4">
              <el-table :data="pager.lists" @selection-change="handleSelectionChange">
                  <!-- <el-table-column type="selection" width="55" /> -->
                  <el-table-column label="名称" prop="name" show-overflow-tooltip />

                  <el-table-column label="操作" width="120" fixed="right">
                      <template #default="{ row }">
                           <el-button
                              type="primary"
                              link
                              @click="handleEdit(row)"
                          >
                              编辑
                          </el-button>
                          <el-button v-if="row.status == 1"
                              type="danger"
                              link
                              @click="handleDelete(row.id)"
                          >
                              删除
                          </el-button>
                          <el-button v-if="row.status == 0"
                              type="primary"
                              link
                              @click="handleRecover(row.id)"
                          >
                              恢复
                          </el-button>
                      </template>
                  </el-table-column>
              </el-table>
          </div>
          <div class="flex mt-4 justify-end">
              <pagination v-model="pager" @change="getLists" />
          </div>
      </el-card>
      <edit-popup v-if="showEdit" ref="editRef" :dict-data="dictData" @success="getLists" @close="showEdit = false" />
  </div>
</template>

<script lang="ts" setup name="hotelBasicLists">
import { usePaging } from '@/hooks/usePaging'
import { useDictData } from '@/hooks/useDictOptions'
import { goodsCateLists, goodsCateDelete, goodsCateRecover } from '@/api/classify'
import { timeFormat } from '@/utils/util'
import feedback from '@/utils/feedback'
import EditPopup from './edit.vue'
import { reactive, ref, shallowRef, computed, nextTick } from 'vue'
const editRef = shallowRef<InstanceType<typeof EditPopup>>()
// 是否显示编辑框
const showEdit = ref(false)


// 查询条件
const queryParams = reactive({
  name: '',
  status: 2 as number | string,
  sort: 0
})

// 选中数据
const selectData = ref<any[]>([])

// 表格选择后回调事件
const handleSelectionChange = (val: any[]) => {
  selectData.value = val.map(({ id }) => id)
}

// 获取字典数据
const { dictData } = useDictData('')

// 分页相关
const { pager, getLists, resetParams, resetPage } = usePaging({
  fetchFun: goodsCateLists,
  params: {}
})

// 添加
const handleAdd = async () => {
  showEdit.value = true
  await nextTick()
  editRef.value?.open('add')
}

// 编辑
const handleEdit = async (data: any) => {
  showEdit.value = true
  await nextTick()
  editRef.value?.open('edit')
  editRef.value?.setFormData(data)
}

// 删除
const handleDelete = async (id: number | any[]) => {
  await feedback.confirm('确定要删除？')
  await goodsCateDelete({ id })
  getLists()
}

// 恢复
const handleRecover = async (id: number) => {
  await feedback.confirm('确定要恢复？')
  await goodsCateRecover({ id })
  getLists()
}

getLists()
</script>

